<template>
  <div v-if="allData">
    <div v-for="(item, index) in allData" :key="index" class="content">
      <div class="titleS">人工备料单</div>
      <!-- 头部信息 -->
      <div style="display: flex; justify-content: space-between">
        <img class="imgS" src="/src/assets/logo/logo.png" alt="Logo" />

        <!-- 渲染单个条形码 -->
        <div style="margin-left: 20px">
          <barcode
            v-if="item.pwsTable.orderNo"
            :value="item.pwsTable.orderNo"
          />
        </div>

        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
          "
        >
          <div>批量：{{ item.pwsTable.qty }}</div>
          <div>产品名称：{{ item.pwsTable.matlDes }}</div>
        </div>

        <!-- 间隔占位（根据需求可以删减） -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <!-- 渲染单个条形码 -->
        <div style="margin-left: 20px">
          <barcode
            v-if="item.pwsTable.batchNo"
            :value="item.pwsTable.batchNo"
          />
        </div>

        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
          "
        >
          <div>T-3(2/3){{ item.pwsTable.lineId }}</div>
          <div>日期：{{ item.pwsTable.orderStartDate }}</div>
        </div>
      </div>

      <!-- table -->
      <el-table :data="item.sapDataRgblVoList" border style="width: 100%">
        <el-table-column align="center" label="物料条码" width="500">
          <template #default="scope">
            <barcode :value="scope.row.newbarcode" />
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="工序"
          align="center"
          width="180"
        />
        <el-table-column prop="ingreDesc" label="物料名称" align="center" />
        <el-table-column prop="orderNo" label="批号" align="center" />
        <el-table-column prop="qty" label="重量" align="center" />
        <el-table-column prop="xxxx" label="规格" align="center" />
        <el-table-column prop="xxxx" label="包数" align="center" />
        <el-table-column prop="xxxx" label="零头（Kg）" align="center" />
        <el-table-column prop="batch" label="批号" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import Barcode from "@/utils/Barcode"; // 引入条形码组件
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { apiaddOrUpdateRgbl } from "@/api/tasksheet";
import { ElMessage } from "element-plus";

const route = useRoute();
const allData = ref<any[]>([]);

onMounted(() => {
  if (route.query.idList) {
    apiaddOrUpdateRgbl(route.query.idList)
      .then((res: any) => {
        allData.value = res.data;
        // 处理每个allData项中sapDataRgblVoList数据的条形码
        if (allData.value) {
          allData.value.forEach((item: any) => {
            if (Array.isArray(item.sapDataRgblVoList)) {
              item.sapDataRgblVoList.forEach((row: any) => {
                row.orderNo = row.orderNo.slice(4);
                row.newbarcode = row.orderNo + row.ingreNo + row.step;
              });
            }
          });
        }
      })
      .catch((err: any) => {
        ElMessage.error(err.msg);
      });
  }
});



// onMounted(async () => {
//   debugger
//   await emitter.on("event", (e) => {
//     console.log("wo收到le", e);

//     apiaddOrUpdateRgbl(e)
//       .then((res: any) => {
//         allData.value = res.data;
//         // 处理每个allData项中sapDataRgblVoList数据的条形码
//         if (allData.value) {
//           allData.value.forEach((item: any) => {
//             if (Array.isArray(item.sapDataRgblVoList)) {
//               item.sapDataRgblVoList.forEach((row: any) => {
//                 row.orderNo = row.orderNo.slice(4);
//                 row.newbarcode = row.orderNo + row.ingreNo + row.step;
//               });
//             }
//           });
//         }
//       })
//       .catch((err: any) => {
//         ElMessage.error(err.msg);
//       });
//   });
// });
</script>

<style scoped>
.content {
  margin: 50px;
  margin-bottom: 150px;
}
.titleS {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 500;
  margin: 40px;
}
.imgS {
  width: 80px;
  height: 80px;
}
</style>
